<template>
  <div>
    <div style="float:left ;margin-bottom: 20px">
      <el-button @click="back">返回</el-button>
    </div>
    <template>
      <!--考试列表-->
      <el-table :data="TableData" stripe border>
        <el-table-column  align="center" prop="id" label="试卷id" width="80">
        </el-table-column>
        <el-table-column  header-align="center"  prop="examName" label="考试名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center"  prop="examTime" label="考试时间" width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center"  prop="trueName" label="学生" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="majorName" label="专业" width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center"  prop="className" label="班级" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center"  prop="logicScore" label="逻辑题得分" width="100">
        </el-table-column>
        <el-table-column
            prop="totalScore"
            label="总得分"
            width="100">
          <template slot-scope="scope">
            <p v-if="scope.row.totalScore==null">待批阅</p>
            <p style="color: #409EFF" v-else-if="scope.row.totalScore >= scope.row.passScore">{{scope.row.totalScore}}</p>
            <p v-else style="color: red">{{scope.row.totalScore}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="阅卷" width="120">
          <template slot-scope="scope">
            <div>
              <el-button icon="el-icon-document"
                         v-if="scope.row.totalScore==null"
                         type="primary"
                         @click="goToMarking(scope.row.id)">批阅</el-button>
              <el-button icon="el-icon-document-checked"
                         v-else type="warning"
                         @click="goToExamRecord(scope.row.id)">已批阅</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="查看成绩" width="120">
          <template slot-scope="scope">
            <div>
              <el-button icon="el-icon-document"
                         disabled v-if="scope.row.totalScore==null"
                         type="danger"
                         >待批阅</el-button>
              <el-button icon="el-icon-document-checked"
                         v-else type="primary"
                         @click="goToExamRecord(scope.row.id)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--  ------------------------分页器------------------------  -->
      <div style="text-align: right;margin-top: 10px">
        <el-pagination
            @current-change="changePage"
            layout="total, prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize">
        </el-pagination>
      </div>
      <!--  分页器结束  -->
    </template>
  </div>
</template>

<script>
let jwt = localStorage.getItem("localJwt");
let classId = localStorage.getItem("localUser").split(",")[5].split(":")[1];
export default {
  data(){
    return{
      TableData: [],
      total: 0,
      pageSize: 0,
      currentPage: 1,
    }
  },
  methods:{
    /*跳转去对应的成绩页面（完整的试卷）*/
    goToExamRecord(id){
      //id为试卷id
      console.log("id = " + id);
      let path = '/record-detail?id=' + id;
      //window.open(path);//此方法会打开一个新的窗口
      this.$router.push(path);
    },
    /*跳转对应阅卷界面*/
    goToMarking(id){
      console.log("id = " + id);
      let path = '/exam-marking?id=' + id;
      this.$router.push(path)//此方法会打开一个新的窗口
      //this.$router.push(path);
    },
    //分页器相关
    changePage(value){
      this.$router.replace('?page=' + value);
      this.loadList();
    },
    back(){
      this.$router.push("/class/exam-detail");
    },
    loadList(){
      let page = this.$router.currentRoute.query.page;
      let examId = location.search.split("=")[1];
      if (!page){
        page = 1;
      }
      console.log('localJwt =' + jwt);
      let url = 'http://localhost:9283/examRecord/my-class/?page='+ page+
          "&classId="+classId+"&examId="+examId;
      console.log('url =' + url);

      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .get(url).then((response) =>{
        let jsonResult = response.data;
        console.log(jsonResult.state);
        console.log(jsonResult.data.list);
        if (jsonResult.state == 20000){
          this.TableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        } else {
          this.$alert(jsonResult.message,'错误',{
            confirmButtonText:'确认',
            callback: action => {// eslint-disable-line no-unused-vars
            }
          })
        }
      });
    },
    /*loadReport(){
       let examId = location.search.split("=")[1];
       let url = 'http://localhost:9284/class/details/'+classId+'/reports?examId='+examId;
       console.log(examId);
       console.log(url);

       this.axios.create(
           {
             'headers':{
               'Authorization':jwt
             }
           }
       ).get(url).then((response)=>{
         let jsonResult = response.data;
         if (jsonResult.state == 20000){
           this.examReport = jsonResult.data;
           console.log(this.examReport)
           if (this.examReport.length == 0){
             this.$message.warning("本场考试无人参加")
           }
         }else{
           this.$message.error(jsonResult.message);
         }
       })

    },*/
  },
  mounted(){
   this.loadList();
  },
}
</script>

<style scoped>

</style>